"use client"; import AbilityClassesView from "@/app/[language]/avatar/components/AbilityClassesView"; import AbilitiesView from "@/app/[language]/avatar/components/AbilityView"; import DateView from "@/app/[language]/avatar/components/DateView"; import FavoritesView from "@/app/[language]/avatar/components/FavoritesView"; import IntroView from "@/app/[language]/avatar/components/IntroView"; import LastsView from "@/app/[language]/avatar/components/LastsView"; import MainView from "@/app/[language]/avatar/components/MainView"; import QuitStatusValues from "@/app/[language]/avatar/components/QuitStatusValues"; import WwwLevelsView from "@/app/[language]/avatar/components/WwwLevelsView"; import Loading from "@/app/[language]/avatar/loading"; import useGetAvatar from "@/app/[language]/avatar/query/useGetAvatar"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarTitle from "@/components/AvatarTitle"; import { useAvatarStore, useSiteStore } from "@/state/Stores"; import { getDefaultAvatarID } from "@/utilities/Utility"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; import { useEffect, useMemo } from "react"; import { EraserFill, Search } from "react-bootstrap-icons"; import Button from "react-bootstrap/Button"; import Col from "react-bootstrap/Col"; import FormControl from "react-bootstrap/FormControl"; import InputGroup from "react-bootstrap/InputGroup"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; import Row from "react-bootstrap/Row"; import Stack from "react-bootstrap/Stack"; import Tab from "react-bootstrap/Tab"; import Tabs from "react-bootstrap/Tabs"; import scss from "@/app/[language]/avatar/[[...want]]/page.module.scss"; export default observer(() => { const { input, setInput, tabItem, setTabItem } = useAvatarStore(); const { siteAvatarID, isLoggedIn } = useSiteStore(); let { want: [want] = [""] } = useParams<{ want: string[] }>(); want = useMemo(() => decodeURIComponent(want), [want]); const { push } = useRouter(); const t = useTranslations(); useEffect(() => { setInput(want); }, [want, setInput]); const { isFetched: isAvatarLoaded, data: avatar } = useGetAvatar(); const onWant = () => { push(`/avatar/${input}`); }; return ( <> <Stack gap={2}> <InputGroup> <Button onClick={() => { push(`/avatar/!${getDefaultAvatarID(siteAvatarID)}`); }} disabled={!isLoggedIn} > {t("onWantMe")} </Button> <FormControl type="search" value={input} onChange={({ target: { value } }) => { setInput(value); }} onKeyDown={({ key }) => { if (key === "Enter") { onWant(); } }} placeholder={t("wantAvatarAssist")} /> <Button variant="success" onClick={onWant}> <Search /> </Button> <Button variant="danger" onClick={() => { push("/avatar"); }} > <EraserFill /> </Button> </InputGroup> {want && !isAvatarLoaded && <Loading />} {isAvatarLoaded && (Array.isArray(avatar) ? ( avatar.length > 0 && ( <> <hr /> <ListGroup> {avatar.map(({ avatarID, avatarName, avatarIntro }) => ( <ListGroupItem key={avatarID} as={Link} href={`/avatar/!${avatarID}`} > <Row> <Col xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col> <Stack gap={2}> <AvatarTitle avatarID={avatarID} avatarName={avatarName} textID /> <span className={scss.avatarIntro}> {avatarIntro} </span> </Stack> </Col> </Row> </ListGroupItem> ))} </ListGroup> </> ) ) : ( <> <hr /> <Row className="g-4"> <Col xs="auto"> <MainView avatar={avatar} /> </Col> <Col xs="auto"> <IntroView avatar={avatar} /> </Col> <Col xs="auto"> <AbilityClassesView avatar={avatar} inputMode="5K" /> </Col> <Col xs="auto"> <AbilityClassesView avatar={avatar} inputMode="7K" /> </Col> <Col xs="auto"> <AbilityClassesView avatar={avatar} inputMode="9K" /> </Col> <Col xs="auto"> <DateView avatar={avatar} /> </Col> <Col xs="auto"> <QuitStatusValues avatar={avatar} /> </Col> </Row> <hr /> <Row> <Col> <Tabs activeKey={tabItem} onSelect={(eventKey) => { if (eventKey) { setTabItem(eventKey); } }} > <Tab title={t("avatarFavoritesTitle")} eventKey="favorites"> <FavoritesView avatar={avatar} /> </Tab> <Tab title={t("avatarLastsTitle")} eventKey="lasts"> <LastsView avatar={avatar} /> </Tab> <Tab title={t("avatarAbilityTitle")} eventKey="abilities"> <AbilitiesView avatar={avatar} /> </Tab> <Tab title={t("wwwLevels")} eventKey="wwwLevels"> <WwwLevelsView avatar={avatar} /> </Tab> </Tabs> </Col> </Row> </> ))} </Stack> </> ); });